<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>博客详情</title>
    <link rel="stylesheet" href="/statics/css/global.css">
    <link rel="stylesheet" href="/statics/css/article-detail.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="../img/user.jpeg">
    <link rel="stylesheet" href="/statics/css/iconfont.css">
    <style>
        .lazy-image {
            background: url('../img/loading.gif') no-repeat center;
            background-size: 26% 35%;
            height: 100%;
            width: 100%;
        }

        .delete-btn {
            margin-left: 10px;
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        .delete-btn:hover {
            background-color: darkred;
        }


        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 10px;
        }

        @media (max-width: 767px) {
            .markdown-body {
                padding: 15px;
            }

            .markdown-body h1 {
                font-size: 1.35em;
            }

        }

        .codehilite {
            border-radius: 10px;
        }

        .article-content img {
            max-width: 100%;
        }

        #outerdiv {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 200;
        }


        #error-info {
            position: fixed;
            top: -50px;
            /* 初始位置在屏幕外 */
            left: 50%;
            transform: translateX(-50%);
            background-color: #ff4d4f;
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
            display: none;
            /* 默认隐藏 */
            opacity: 0;
            animation: slideInOut 3s ease-in-out forwards;
            /* 使用动画 */
        }

        @keyframes slideInOut {
            0% {
                top: -50px;
                /* 从顶部外部开始 */
                opacity: 0;
            }

            30% {
                top: 20px;
                /* 滑动到视图中 */
                opacity: 1;
            }

            80% {
                top: 20px;
                opacity: 1;
            }

            100% {
                top: -50px;
                /* 滑动回顶部外部 */
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <nav class="nav-bar-holder" id="nav">
        <div class="nav-bar" id="nav-bar">
            <div class="logo-box">
                <a href="http://localhost:8080/index" class="blog-title ta-c"><img style="vertical-align: top;"
                        alt="logo" src="/statics/images/logo.png" /></a>
            </div>
            <div class="nb-a-holder" id="home"><a class="nb-a ta-c" href="http://localhost:8080/index">首页</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="/statics/html/category.html">分类</a></div>
            <div class="nb-a-holder">
                <a :href="'/personInfo/' + (personInfo.userId || '')" class="nb-a ta-c">个人信息</a>
            </div>

            <div class="nb-a-holder-last">
                <div class="nb-a-holder-small">
                    <a class="a-login" @click="logout" style="cursor: pointer;">注销</a>
                </div>
            </div>

        </div>
    </nav>

    <section class="main" id="app">
        <span v-if="errorMessage" id="error-info" class="error-message">{{ errorMessage }}</span>
        <label for="article_id"></label><input hidden id="article_id" name="article_id" value="55">
        <label for="user_id"></label><input hidden id="user_id" name="user_id"
            value="{{ no such element: django.contrib.sessions.backends.cache.SessionStore object[&#39;user_id&#39;] }}">
        <div class="left-box">
            <div id="outerdiv">
                <div id="innerdiv" style="position:absolute;"><img alt id="bigimg"
                        style="box-shadow: 0 0 10px rgba(0,0,0,0.38)" src="" />
                </div>
            </div>
          
            <div class="article-container">
            <div class="article-content markdown-body">
                    <h1 style="margin: 10px 0">{{blog.title}}</h1>
                    <div class="writer-info">
                        <span style="margin: 5px 0;">作者: </span>
                        <span id="writer">{{blog.authorName}} </span>
                        <span id="write-time">2019-12-05 23:45:29</span>
                        <span>阅读(<span id="read-number">{{blog.readed}}
                        </span>)</span>
                        <span>喜欢：&nbsp {{blog.countOfLiked}}</span>
                        <i class="iconfont icon-xihuan" @click="like" 
                        :style="isLike ? 'color:red' : ''"></i>
                        <span>收藏：&nbsp {{blog.countOfFavorite}}
                        </span>
                        <i class="el-icon-star-on" @click="favorite" 
                        :style="isFavorite ? 'color:red' : ''"></i>
                    </div>
                    <p style="font-size: 18px;"> {{blog.content}} </p>
            </div>

            </div>
         
            <div class="comment-container" style="margin-top: 20px; margin-bottom: 10px">
                <div class="sort-box">
                    <span class="at-sort-s fl"><a style="box-sizing: content-box;"
                            class="at-sort-comment-a c-666">评论</a></span>
                    <span class="location fl c-666"><a class="at-sort-detail c-666"></a> </span>
                </div>
                <div class="text-area-holder">
                    <input type="textarea" :rows="2" placeholder="请输入内容" v-model="newComment.comment"></input>
                </div>
                <div class="button-line">
                    <span id="error-info"></span>
                    <button type="success" id="publish-btn" round @click="submitComment">发布</button>
                </div>
                <div class="total-count">
                    共 <span id="comment-count">{{ comments.length }}</span> 条评论
                </div>
                <div v-for="comment in comments" :key="comment.commentId">
                    <div class="comment-item">
                        <div class="user-img-box">
                            <img :src="comment.reviewer.avatar" id="user-img" alt="">
                        </div>
                        <div class="comment-box" style="height: 50px;min-height: 50px!important;">
                            <div class="user-info">
                                <span class="user-name" style="margin-left: 0px;">{{comment.reviewer.nickname}}</span>
                                <span class="publish-time"> {{comment.reviewDate | dateFormate}}</span>
                                <button v-if="isOwner(comment.reviewer.userId)"
                                @click="deleteComment(comment.commentId)" 
                                class="delete-btn">删除</button>
                            </div>
                        </div>
                        <div class="comment-content c-666">
                            <p style="font-weight: bold;">{{comment.comment}}</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    
    <footer class="footer">
        <div class="footer-line">Powered By Cross Fire • © 2024</div>
    </footer>

    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/statics/js/sweetalert.min.js"></script>
    <script type="text/javascript" src="/statics/js/pace.min.js"></script>
    <script type="text/javascript" src="/statics/js/base.js"></script>
    <script src="/statics/js/request.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    blog: { createDate: "1900-01-01 00:00:00" },
                    comments: [],
                    newComment: {
                        commentId: undefined,
                        comment: '',
                        cBlogId: '',
                        reviewer: '',
                        reviewDate: '1900-01-01 00:00:00'
                    },

                    recommend: [],
                    isLike: false,
                    isFavorite: false,
                    errorMessage: '',

                }
            },
            created() {
                this.init();
                this.initUser();
            },
            methods: {
                isOwner(userId) {
                    return userId === this.personInfo.userId;
                },
        
                deleteComment(commentId) {
                    this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete("/deleteComment/" + commentId, {}, res => {
                            if (res === 1) {
                                this.$message.success('评论删除成功');
                                this.initComments();  
                            } else {
                                this.$message.error('删除失败');
                            }
                        });
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                async initBlog() {
                    let urlArr = window.location.pathname.split("/");
                    let id = urlArr[urlArr.length - 1]
                    this.newComment.cBlogId = id / 1
                    await request.post("/blog/" + id, (res) => {
                        this.blog = res;
                        this.isLiked()
                        this.isFavorited()
                    })
                },
                async initComments() {
                    let urlArr = window.location.pathname.split("/");
                    let id = urlArr[urlArr.length - 1]
                    await request.post("/comments", { blogId: id }, res => {
                        this.comments = res
                    })
                },
                async initUser() {
                    await request.post("/personalInfomation", (res) => {
                        this.personInfo = res;
                    });
                },

                async isLiked() {
                    console.log(this.isLike)
                    await request.post("/isLiked/" + this.blog.blogId, res => {
                        console.log("是否like：" + this.isLike)
                        console.log("返回的是否like：" + res)
                        this.isLike = res > 0
                    })
                },
                async isFavorited() {
                    await request.post("/isFavorited/" + this.blog.blogId, res => {
                        this.isFavorite = res > 0
                    })
                },
                async initRecommend() {
                    await request.post("/recommend", res => {
                        this.recommend = res
                    })
                },
                handleBlog(id) {
                    window.location = '/blog/' + id
                },
                init() {
                    this.initBlog()
                    this.initComments()
                    this.initRecommend()
                    request.post("/personalInfomation", res => {
                        this.newComment.reviewer = res.userId
                    })
                },
                submitComment() {
                    if (this.newComment.comment.trim().length === 0) {
                        this.$message.error('评论不能为空');
                        return false;
                    }
                    request.post("/newComment", this.newComment, res => {
                        if (res === 0) {
                            this.$message.error = '评论失败';
                            return false;
                        }
                        this.$message.success('评论成功');
                        this.initComments();
                        this.newComment = { ...this.newComment, comment: '' };
                    })
                },

                like() {
                    request.post("/liked", { 'iBlogId': this.blog.blogId, 'isLike': this.isLike }, res => {
                        this.blog.countOfLiked = res
                        this.isLike = !this.isLike
                    })
                },

                favorite() {
                    request.post("/favorited", { 'fBlogId': this.blog.blogId, 'isFavorite': this.isFavorite }, res => {
                        this.blog.countOfFavorite = res
                        this.isFavorite = !this.isFavorite
                    })
                }
            },
            filters: {
                dateFormate(date) {
                    console.log(date)
                    return date.substring(0, 10)
                }
            }

        })
    </script>
    <script>
        new Vue({
            el: 'nav',
            data() {
                return {
                    personInfo: { name: '', avatar: '/statics/images/18908.png' },
                }
            },
            created() {
                this.initUser()
            },
            methods: {
                logout() {
                    window.sessionStorage.removeItem('token')
                    //document.cookie = `token=${res.token}; expires=${ data.getDate() -10 }`
                    let date = new Date()
                    date.setDate(date.getDate() - 1)
                    document.cookie = `token=""; expires=${date.toUTCString()}`
                    window.location = "/login"
                },
                toPersonInfo() {
                    if (this.personInfo.userId) {
                        window.location = '/personInfo/' + this.personInfo.userId;
                    } else {
                        console.error('User ID not available!');
                    }
                },
                async initUser() {
                    await request.post("/personalInfomation", (res) => {
                        this.personInfo = res;
                    });
                },
            }
        })
    </script>

</body>

</html>